@import url('../../utils/less/base.less');

.page {
    &>.banner {
        & .swiper-item {
            &>.item {
                .bgimg(cover, center);
                height: 100%;
            }
        }

        height: 420rpx;
    }

    &>.searchRow {
        .bgcolor(white);
        .radius(100rpx);
        .relative();
        .flex-start(center);
        margin: -40rpx 32rpx;
        height: 80rpx;
        box-shadow: 0 0 20rpx -12rpx #333;

        // &>.title {
        //     .text(30rpx);
        //     .flex(none);
        //     margin-left: 30rpx;
        // }

        &>.search-input {
            .text(30rpx);
            .flex(auto);
            margin: 0 30rpx;
        }
    }
    
    &>.banner-menus {
        .flex-start();
        margin-top: 66rpx;
        padding: 0 32rpx;
        &>.item {
            .flex-start(center, col);
            .text(32rpx);
            width: 33.3333%;
            &>.icon {
                width: 100rpx;
                height: 100rpx;
                margin-bottom: 10rpx;
            }
        }
        // &>.placeholder {
        //     width: 32rpx;
        // }
        // &>.banner-menus-item {
        //     .flex-center(center, auto);
        //     .text(40rpx, #fff,bolder);
        //     .radius(20rpx);
        //     height: 120rpx;
        //     box-shadow: 0 0 22rpx -3rpx #333;
        // }
    }

    &>.menus-item {
        .flex-start(center, wrap);
        .radius(30rpx);
        .bgcolor(white);
        padding: 14rpx;
        margin: 26rpx 32rpx 20rpx;

        &>.item {
            .flex-start(center, col);
            padding: 14rpx 0;
            width: 20%;

            &>.icon {
                width: 70rpx;
                height: 70rpx;
            }

            &>.title {
                .text-overflow(1);
                .text(center);
                width: 130rpx;
            }
        }
    }

    &>.tab {
        .flex-start(center);
        .bgcolor(#f5f5f5);
        .sticky(tl);
        overflow-x: auto;
        margin-top: 30rpx;
        padding-left: 32rpx;
        padding-right: 32rpx;

        &>.item {
            .text(28rpx);
            .relative();
            padding: 20rpx 0;
            margin-right: 30rpx;

            &>.item-title {
                .text-overflow(1);
                max-width: 220rpx;
            }

            &>.index {
                .bgcolor(#16ad91);
                .absolute(bl, _, 6rpx);
                .radius(30rpx);
                .transition(.25s);
                width: 100%;
                height: 8rpx;
            }
        }
    }

    &>.list-row {
        .flex-between(wrap);
        padding: 16rpx 32rpx;

        &>.item {
            .bgcolor(white);
            .radius(10rpx);
            .overflow-hidden();
            width: calc(50% - 16rpx);
            margin: 16rpx 0;

            &>.cover {
                .bgimg(cover);
                .flex-end(col);
                height: 250rpx;

                &>.tips {
                    // .bgcolor(rgba(0, 0, 0, .5));
                    .text(white, 24rpx);
                    .text-overflow(1);
                    padding: 12rpx 20rpx;
                    background: linear-gradient(rgba(0,0,0,0), #333);
                }
            }

            &>.info {
                .flex-between(col);
                padding: 20rpx;

                &>.title {
                    .text(30rpx);
                    .text-overflow(2);
                }

                &>.goodat {
                    .text(#555);
                    .text-overflow(2);
                    margin-top: 10rpx;
                }

                &>.tag {
                    .flex-start(center, wrap);
                    margin-top: 4rpx;
                    &>.tagitem {
                        .bgcolor(#e0a502);
                        .text(white, 24rpx);
                        .flex(none);
                        .radius(6rpx);
                        padding: 4rpx 8rpx;
                        margin: 6rpx;
                    }
                }

                &>.price {
                    .flex-start(baseline);
                    .text(#ff2600, 32rpx, bold);
                    margin-top: 4rpx;
                    &>.cycle {
                        .text(24rpx, #999, lighter, deline);
                        margin-left: 16rpx;
                    }
                }
            }
        }
    }

    &>.list-status {
        .text(center, #999);
        padding-bottom: 32rpx;
    }
}